import React, { memo, useEffect, Suspense } from 'react'
import { Button } from 'antd-mobile'
// 这个是非hook用法
// import { Provider, connect } from 'react-redux'
import { Provider, useSelector, useDispatch, shallowEqual } from 'react-redux' // hooks用法
import {
  BrowserRouter,
  // Link,
  Route,
  NavLink,
  Routes,
  useNavigate
} from 'react-router-dom'
import '@/assets/css/common.css'
import './App.css'
import { AppWrap } from './appcss.js'
import { banner } from '@/api/index'
const Home = React.lazy(_ => import('@/view/Home'))
const About = React.lazy(_ => import('@/view/About'))
const App = memo((props) => {
  // console.log(store.getState()) // 普通写法取值方式
  // const state = useSelector(state => state, shallowEqual) // hooks的写法 没有使用immutable state取值方式
  const config = useSelector(state => state.get('config'), shallowEqual) // 使用了immutable state取值方式
  // 组件和redux关联: 获取数据和进行操作 reducer拆分这样写 目前不能用因为没有分
  /* const { topBanners } = useSelector(state => ({
    // topBanners: state.get("recommend").get("topBanners")
    topBanners: state.getIn(["recommend", "topBanners"])
  }), shallowEqual); */ // 使用了immutable 并且进行了模块化store state取值方式
  console.log(config)
  const dispatch = useDispatch() // 发送dispatch 方法
  useEffect(() => {
    /* banner().then(res => {
      console.log(res)
    }) */
  }, [])
  return (
    <div>
      <Button color='primary'>Primary</Button>

      <BrowserRouter basename='/reactzh'>
        <Suspense fallback={<div>page loading</div>}>
        <NavLink exact="true" to={{pathname: '/'}} activeclassname="link-active">首页</NavLink>
        <NavLink to='/about' activeclassname="link-active">关于</NavLink>
        {/* <NavLink to="/profile" activeClassName="link-active">我的</NavLink>
        <NavLink to="/abc" activeClassName="link-active">abc</NavLink>
        <NavLink to="/user" activeClassName="link-active">用户</NavLink>
        <NavLink to={`/detail/${id}`} activeClassName="link-active">详情</NavLink>
        <NavLink to={`/detail2?name=why&age=18`} activeClassName="link-active">详情2</NavLink>
        <NavLink to={{
          pathname: "/detail3",
          search: "name=abc",
          state: info
        }}
          activeClassName="link-active">
          详情3
        </NavLink> */}
        {/* 2.Switch组件的作用: 路径和组件之间的映射关系 react-router-dom6.x换成了Routes Routes */}
        <Routes>
          <Route exact path="/" element={<Home/>} />
          <Route path='/about' element={<About/>} />
        </Routes>
        </Suspense>
      </BrowserRouter>
    </div>
  )
})
export default App
